<template>
  <div>
    <div class="box">
      <p>这是文章页面</p>
      <p>文章ID:{{ $route.params.id }}</p>
      <p>文章ID来自计算属性:{{ pageId }}</p>
      <p>title:{{ title }}</p>
      <button @click="jumpBack">点击事件返回上一页</button>
      <button @click="jumpother">进入另一篇文章</button>
      <router-link :to="{ path: '/artcle/56' }">
        <button>进入另一篇文章方式二</button>
      </router-link>
      <p>{{ val }}</p>
    </div>
    <button @click="jumpIndex">首页</button>
  </div>
</template>
<!-- 
<script>
export default {
  name: 'ArtcleDetail',
  computed: {
    pageId() {
      return this.$route.params.id
    },
    title() {
      return this.$route.meta.title
    }
  },
  data() {
    return {
      val: ''
    }
  },
  props: {
    // 接收父组件传递的参数
    id: String
  },
  /*   watch: {
    // 对路由变化作出响应,当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用,
    $route(to, from) {
      console.log('watch-from: ', from)
      console.log('watch-to: ', to)
      if (to.params.id === '3333') {
        this.val = 1
      } else {
        this.val = ''
      }
    }
  }, */
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('组件内的守卫:beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('组件内的守卫:beforeRouteUpdate')
    if (to.params.id === '3333') {
      this.value = 2
    } else {
      this.value = ''
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('组件内的守卫:beforeRouteLeave')
    next()
  },
  mounted() {
    //
    console.log(
      'mounted:可以在这里面请求数据,但是例如从 /user/foo 导航到 /user/bar这种情况不会触发,就要watch里面请求'
    ),
      console.log('this.id: ', this.id)
  },
  methods: {
    jumpBack() {
      this.$router.go(-1)
    },
    jumpother() {
      this.$router.push('/artcle/3333')
    },
    jumpIndex() {
      this.$router.push({ path: '/' })
    }
  }
}
</script> -->

<script setup>
defineOptions({
  name: 'ArtcleDetail',
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('组件内的守卫:beforeRouteEnter')
    next()
  }
})
// import { computed, ref, watch } from 'vue'
import { computed, ref } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
// , onBeforeRouteLeave
const router = useRouter()
const route = useRoute()
const pageId = computed(() => {
  return route.params.id
})
const title = computed(() => {
  return route.meta.title
})
const val = ref('')
const jumpBack = () => {
  router.go(-1)
}
const jumpother = () => {
  router.push('/artcle/3333')
}
const jumpIndex = () => {
  router.push({ path: '/' })
}

// 第一种watch监听
/* watch(
  () => route.params,
  (to, from) => {
    console.log('watch-to: ', to)
    console.log('watch-from: ', from)
    console.log('to.params.id: ', to.id)
    if (to.id === '3333') {
      val.value = 1
    } else {
      val.value = ''
    }
  }
) */
// 第二种

onBeforeRouteUpdate((to, from) => {
  console.log('from1: ', from)
  console.log('to1: ', to)
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
  console.log('组件内的守卫:beforeRouteUpdate')
  if (to.params.id === '3333') {
    val.value = 1
  } else if (to.params.id === '56') {
    val.value = 4
  }
  else {
    val.value = ''
  }
})
// onBeforeRouteLeave((to, from) => {
//   console.log('from: ', from)
//   console.log('to: ', to)
//   const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
//   // 取消导航并停留在同一页面上
//   if (!answer) return false
// })
</script>

<style lang="scss" scoped>
.box {
  height: 1000px;
}
</style>
